<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 会员等级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="query.name" @keyup.enter.native="handleSearch" placeholder="会员等级"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                row-key="id"
            >
                @selection-change="handleSelectionChange" >

                <el-table-column class-name="user2" prop="title" label="会员等级"></el-table-column>
                <el-table-column prop="maxPoint" label="积分上限" align="center"></el-table-column>
                <el-table-column prop="minPoint" label="积分下限" align="center"></el-table-column>
                <el-table-column prop="initPoint" label="初始化积分" align="center"></el-table-column>
                <el-table-column prop="sellPrice" label="售价"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :before-close="closeDialog" :close-on-click-modal="false" title="会员等级" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" id="form" label-width="100px" :rules="rulesForm">
                <el-form-item label="会员等级" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="积分上限" prop="maxPoint">
                    <el-input v-model="form.maxPoint" v-model.number="form.maxPoint" id="maxPoint"></el-input>
                </el-form-item>
                <el-form-item label="积分下限" prop="minPoint">
                    <el-input v-model="form.minPoint" v-model.number="form.minPoint" id="minPoint"></el-input>
                </el-form-item>
                <el-form-item label="初始化积分" prop="initPoint">
                    <el-input v-model="form.initPoint" v-model.number="form.initPoint" id="legalPerson"></el-input>
                </el-form-item>

                <el-form-item label="售价" prop="sellPrice">
                    <el-input v-model="form.sellPrice" v-model.number="form.sellPrice" id="sellPrice"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog()">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'memberlevel_list', //去掉name则每次点击菜单，都出发created
    data() {
        return {
            query: {
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            loading: false,

            rulesForm: {
                title: [
                    {
                        required: true,
                        message: '请输入会员等级!',
                        trigger: 'blur'
                    }
                ],
                maxPoint: [
                    {
                        required: true,
                        message: '请输入积分上限!'
                    },
                    { type: 'number', message: '必须为数字值' }
                ],
                minPoint: [
                    {
                        required: true,
                        message: '请输入积分下限!'
                    },
                    { type: 'number', message: '必须为数字值' }
                ],
                initPoint: [
                    {
                        required: true,
                        message: '请输入初始化积分!'
                    },
                    { type: 'number', message: '初始化积分必须为数字值' }
                ],
                sellPrice: [
                    {
                        required: true,
                        message: '请输入售价!'
                    },
                    { type: 'number', message: '售价必须为数字值' }
                ]
            }
        };
    },
    created() {
        this.loading = true;
        this.getData();
    },
    methods: {
        // 触发搜索按钮
        handleSearch() {
            this.query.pageIndex = 1;
            this.getData();
        },
        getData() {
            this.loading = true;
            var parmas = {
                name: this.query.name,

                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };

            axios({
                url: config.gatewayUrl + '/member/memberlevel/getpage',
                method: 'post',
                data: parmas,
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
                this.loading = false;
            });
        },

        // 编辑操作
        handleEdit(index, row) {
            if (row) {
                var str=JSON.stringify(row);
                this.idx = index;
                this.form =JSON.parse(str);
            } else {
                this.form.id = '';
            }
            this.editVisible = true;
            console.log(this.tableData);
        },
        // 保存编辑
        saveEdit(formName) {
            var that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var dto = this.form;
                    axios.post(config.gatewayUrl + '/member/memberlevel/post', dto)
                        .then((res) => {
                            if (res.data.result == false) {
                                that.$message.error(res.data.promptMsg);
                                console.log(res);
                            } else {
                                that.$refs.form.clearValidate();
                                //that.editVisible = false;
                                that.closeDialog();
                                that.$message.success(`保存成功!`);
                                that.getData();
                            }
                        })
                        .catch((error) => {
                            console.log(error); //  错误处理 相当于error
                        });
                    that.$refs.form.clearValidate();
                } else {
                    return false;
                }
            });
        },

        closeDialog() {
 
            var that = this;
            //this.$refs.form.resetFields();
            this.form = {
                id: '',
                title: ''
            };
            setTimeout(function () {
                that.$refs.form.clearValidate();
            }, 100);
            this.editVisible = false;
        },
        // 分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    },
    watch: {}
};
</script>
